import React, {useLayoutEffect} from 'react'
import ReactECharts from 'echarts-for-react'
import * as echarts from 'echarts';

const Com = () => {

  useLayoutEffect( () => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    const data = [];
    for (let i = 0; i <= 100; i++) {
      let theta = (i / 100) * 360;
      let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
      data.push([r, theta]);
    }
    var option = {
      title: {
        text: 'Two Value-Axes in Polar'
      },
      legend: {
        data: ['line']
      },
      polar: {},
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      angleAxis: {
        type: 'value',
        startAngle: 0
      },
      radiusAxis: {},
      series: [
        {
          coordinateSystem: 'polar',
          name: 'line',
          type: 'line',
          data: data
        }
      ]
    };
    option && myChart.setOption(option);
  }, [])
  const EasyOption = () => {
    const option = {
      title: {
        text: 'echarts 简单折线图'
      },
      legend: {
        data: ['星期', '日期', '测试']
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '星期',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        },
        {
          name: '日期',
          data: [620, 1032, 801, 834, 1390, 1830, 320],
          type: 'bar',
          smooth: true
        },
        {
          name: '测试',
          data: [1820, 1932, 1901, 1934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ],
      tooltip: {
        show: true
      }
    }
    return option
  }
  return (
    <div>
      <div id="main" style={{width: "100%", height: 600}}>
        echarts
      </div>
      <ReactECharts option={EasyOption()}></ReactECharts>
    </div>
  )
}


export default Com